<template>
    <view>
        <view class='logo'>
            <image
                    src='https://aowei-environment.oss-cn-beijing.aliyuncs.com/uploads/20220328/2a5f740941b2b1a97a11c08229113037.png'>
            </image>
            <text>鼹鼠创宝</text>
        </view>

        <view class='lable'>请允许鼹鼠创宝获取以下权限</view>
        <view class='text'>以下信息仅用于您登陆鼹鼠创宝，我们将严格保密绝不外泄，更不会对您发送垃圾信息造成骚扰</view>
        <view :class='getUser?"lable-active":"lable"' style='margin-top:40rpx;'>获取您的公开信息（昵称，头像等）</view>
        <view class='text'>获取您的公开信息方便您使用全部功能</view>
        <view :class='getPhone?"lable-active":"lable"' style='margin-top:40rpx;'>授权手机号</view>
        <view class='text'>获取您的手机号用于注册登陆、实名认证</view>

        <block v-if="!getUser">
            <button @click="getuserinfo">第一步，获取公开信息</button>
        </block>

        <button open-type='getPhoneNumber' @getphonenumber="getPhoneNumber" hover-class='button-hover'
                v-if="!getPhone&&getUser">第二步，授权手机号</button>
        <button hover-class='button-hover' v-if="getPhone&&getUser">登陆中</button>
        <view class="login-tips">登录即代表您已同意 <view @click="goAgreement">《鼹鼠创宝注册协议》</view>
        </view>
    </view>
</template>

<script>
import {
    mapState,
    mapActions
} from 'vuex'
export default {
    data() {
        return {
            getUser: false,			//手用户信息获取状态
            getPhone: false,		//手机号获取状态
            userInfo: '',				//用户信息
            openid: '',					//openid
            mobile: '',					//手机号
            pid: '',						//邀请码
        };
    },
    onShow() {
        if (uni.getStorageSync('pid')) {
            this.pid = uni.getStorageSync('pid')
        }
    },
    methods: {
        ...mapActions(['getUserInfo']),
        async getuserinfo() {
            // 获取用户信息
            let userInfo = await this.$tools.mpGetUserProfile()
            let code = await this.$tools.mpGetCode()
            console.log(code)
            this.$api.login({
                code: code.code,
                pid: this.pid
            }).then(res => {
                if (res.code == 1) {
                    this.openid = res.data.openid
                    this.userInfo = userInfo.userInfo
                    uni.setStorageSync('token', res.data.userinfo.token)
                    this.getUser = true
                }
            })

            // uni.getUserProfile({
            // 	lang: 'zh_CN',
            // 	desc: '获取用户信息',
            // 	success: userInfo => {
            // 		console.log(userInfo, 'userInfo');
            // 		this.userInfo = userInfo.userInfo
            // 		uni.login({
            // 			provider: 'weixin',
            // 			success: loginInfo => {
            // 				console.log(loginInfo, 'loginInfo');
            // 				this.get('/api/v1/wechat/openid',{
            // 					code:loginInfo.code
            // 				}).then(res=>{
            // 					console.log(res)
            // 					this.openid = res.data.openid
            // 					this.getUser = true
            // 				})
            // 			}
            // 		});
            // 	},
            // 	fail: err => {
            // 		console.log(err, 'err')
            // 	}
            // });
        },
        getPhoneNumber(e) {
            uni.login({
                provider: 'weixin',
                success: loginInfo => {
                    console.log(loginInfo, 'loginInfo');
                    this.$api.getWechatMobile({
                        code: loginInfo.code,
                        iv: e.detail.iv,
                        encryptedData: e.detail.encryptedData
                    }).then(res => {
                        console.log(res)
                        if (res.code == 1) {
                            this.mobile = res.data.phoneNumber
                            this.getPhone = true
                            this.login()
                        } else {
                            uni.showToast({
                                title: '获取失败，请重试',
                                icon: 'none'
                            })
                        }
                    })
                }
            });

        },
        login() {
            console.log('登录')
            this.$api.updateUserInfo({
                openid: this.openid,
                username: this.userInfo.nickName,
                avatar: this.userInfo.avatarUrl,
                area: '',
                birthday: '',
                // pid:this.pid
            }).then(res => {
                if (res.code == 1) {
                    this.$tools.toast('登录成功')
                    this.getUserInfo()
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '../index/index'
                        })
                    }, 1000)
                }
            })

            // this.post('api/v1/wechat/register',{
            // 	openid:this.openid,
            // 	nickname:this.userInfo.nickName,
            // 	avatar:this.userInfo.avatarUrl,
            // 	mobile:this.mobile,
            // 	pid:this.pid
            // }).then(res=>{
            // 	console.log(res)
            // 	if(res.code==1){
            // 		uni.showToast({
            // 			title:'登录成功',
            // 			icon:'none'
            // 		})
            // 		uni.setStorageSync('userInfo',res.data)
            // 		uni.setStorageSync('token',res.data.token)
            // 		uni.setStorageSync('openid',res.data.openid)
            // 		setTimeout(()=>{
            // 			uni.reLaunch({
            // 				url:'../../home/home'
            // 			})
            // 		},1000)

            // 	}else{
            // 		uni.showToast({
            // 			title:'登录失败，请重试',
            // 			icon:'none'
            // 		})
            // 	}
            // })
        },
        goAgreement() {
            uni.navigateTo({
                url: './userAgreement/userAgreement'
            })
        }
    }
}
</script>

<style lang="scss">
.logo {
    width: 100%;
    height: 300rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50rpx;
}

.logo image {
    width: 120rpx;
    height: 120rpx;
}

.logo text {
    font-size: 30rpx;
    color: #474747;
    margin-top: 20rpx;
}

.lable {
    width: 90%;
    margin-left: 5%;
    font-size: 30rpx;
    color: #474747;
    font-weight: bold;
}

.text {
    width: 90%;
    margin-left: 5%;
    font-size: 26rpx;
    color: #8a8a8a;
    margin-top: 10rpx;
}

.lable-active {
    width: 90%;
    margin-left: 5%;
    font-size: 30rpx;
    color: #DBB366;
    font-weight: bold;
}

button {
    background: linear-gradient(90deg, #2B2A28, #4B4945);
    color: #fff;
    width: 90%;
    margin-left: 5%;
    margin-top: 100rpx;
    font-size: 30rpx;
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-hover {
    opacity: 0.6;
    background: #DBB366;
    color: #fff;
}

.use-phoneNumber-login {
    width: 90%;
    position: fixed;
    bottom: 20rpx;
    left: 5%;
    margin-top: 50rpx;
    color: #256DF2;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.use-phoneNumber-login image {
    width: 100rpx;
    height: 100rpx;
}

.use-phoneNumber-login view {
    font-size: 24rpx;
    color: #8a8a8a;
    margin-top: 10rpx;
}

.use-phoneNumber-login .blue {
    color: #256DF2;
}

.login-tips {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #000;
    height: 100rpx;
}

.login-tips view {
    color: #256DF2;
}
</style>
